<template>
    <!-- 中间部分 -->
    <div class="m-padding-tb-big">
        <!-- 创建中间容器 防止左右铺满 -->
        <div class="ui container">
            <!-- 使用布局 左右 11 5 -->
            <div class="ui stackable grid">
                <!-- 左侧布局 左 11 -->
                <div class="eleven wide column">
                    <!-- 创建中间内容分段 -->
                    <div class="ui attached segment">
                        <div class="ui centered aligned card" style="width: 700px !important;">
                            <img src="../assets/image/indexImage/0x01.jpg" style="width: 700px !important; height: 420px !important;" alt="">
                        </div>
                    </div>
                </div>

                <!-- 右侧布局 右 5 -->
                <div class="five wide column attached">
                    <!-- 关于我信息组 -->
                    <div class="ui segments">
                        <!-- 关于我 -->
                        <div class="ui secondary attached segment">
                            <div class="column">
                                <!-- <i class="idea teal icon"></i> -->
                                关于我...
                            </div>
                        </div>
                        <!-- 个人文字简介 -->
                        <div class="ui attached segment">
                            <p >huanlis 是一个自由软件开发者。物联网应用技术专业毕业，参与过物联网相关的大学生竞赛。自学软件开发，主要学习java语言。常用的技术栈为Spring MVC、Spring
                                Boot、Vue。如果有需要请与我联系(18093329352@163.com)</p>
                            <p >本网站长期运行，并持续迭代更新与维护。对本网站有其他建议可以通过邮箱与我联系。</p>
                        </div>
                        <!-- 个人标签 -->
                        <div class="ui attached segment m-padding-tb-0-3em">
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                            <div class="ui orange label m-margin-0-3-em">测试</div>
                        </div>
                        <!-- 技能标签 -->
                        <div class="ui attached segment m-padding-tb-0-3em">
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                            <div class="ui teal basic label m-margin-0-3-em">java</div>
                        </div>
                        <!-- 联系方式 -->
                        <div class="ui bottom attached segment">
                            <div class="ui center aligned ">
                                <a href="#" class="ui circular button icon" id="github"><i class="ui green github icon"></i></a>
                                <a href="#" class="ui circular button icon" id="weixin"><i class="ui green weixin icon"></i></a>
                                <a href="#" class="ui circular button icon" id="qq"><i class="ui green qq icon"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui meQR flowing popup hidden" style="padding: 0 !important;">
                        <div class="ui  basic label">
                            <img src="../assets/image/微信二维码.jpg" style="width: 100px !important; height: 100px !important;" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "About",
        data() {
            return {

            }
        },
        mounted() {
            // 设置打赏二维码显示的位置
            $('#payButton').popup({
                popup: $('.payQR'),
                on: 'click',
                position: 'top center'
            })

            // 设置联系我的二维码
            $('#qq').popup({
                popup: $('.meQR'),
                on: 'click',
                position: 'top center'
            })
            $('#github').popup({
                popup: $('.meQR'),
                on: 'click',
                position: 'top center'
            })
            $('#weixin').popup({
                popup: $('.meQR'),
                on: 'click',
                position: 'top center'
            })
        }
    }
</script>

<style scoped>

</style>
